typescript + amd tips

typescript 配合 amd 规范的更轻量、"纯" 前端打开方式

曾经数年以前，就尝试 typescript 无奈至今一直有几个小问题没有处理:

0 必须要 import * as $ from "jquery" 这样的方式写代码，才能有提示
1 由于0，必须要 webpack 打包项目，才能把 jquery 以 external 方式剔除
2 必须要 node_modules 下安装各种库的 d.ts 才能 resolve 到提示文件

经常会想，既然很麻烦，怎么使用无所谓，加个 webpack 工具链也能忍，html 提前引入脚本方式要放弃，一点点妥协之后，项目才能跑起来，对 npm 和 webpack 的重度依赖终究是个梗！

于是突然有一天发现了如下解法：

import * as $ from "jquery"

使用代码不变，才能有提示

require.config({
    baseUrl: './',
    paths: {
        "jquery": "../lib/jquery.min",
    },
    shim: {
        "jquery": {
            exports: '$'
        },
    }
})

这里同时加入 paths 和 shim，从而支持了 script 引入 和 require 加载

<script src="../lib/vue.min.js"></script>
<script src="../lib/esl.min.js"></script>

html 正常使用 script 全局引入，我用了百度的 esl 加载器 requirejs 同理

"paths": {
  "jquery": ["typing/jquery/index.d.ts"]
},

tsconfig 配置后，可以把 @types/jquery 的申明文件放在自定义项目目录./typing/ 里了

且你可以自定义静态化的处理 typing 下的 d.ts 文件!
且你可以自定义静态化的处理 typing 下的 d.ts 文件!
且你可以自定义静态化的处理 typing 下的 d.ts 文件!

重事3遍，d.ts 和 模块名的正确对应后，vscode 提示完美!

至此，任意一个前端项目仅需要依赖一个 tsc 编译 typescript 就可以轻量的完美运行了，

终于可以优雅的写 ts 了，爽！

由于依赖太少，大家可以根据需要定制自己的方案！